<template>
    <van-nav-bar title="我的分享" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="share">
        <div class="share_code">
            <p class="p1"> 推荐码:{{ InviteCodeCode }} </p>
            <div class="code">

                <div class="img">
                    <div class="qrcodeimg" id="shareqrcodeimg" v-if="apiUrl">
                        <img :src="apiUrl" alt="">
                        <!-- <qrcode-vue :value="url" :size="qcsize" level="H" /> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="share_submit">
            <van-button block type="primary" native-type="submit" class="copyCode btn1" :data-clipboard-text="InviteCodeCode"
                @click="clipboardCode()"> 复制推荐码 </van-button>
            <br />
            <br />
            <van-button block type="primary" native-type="submit" class="copy btn1" :data-clipboard-text="url"
                @click="clipboard()"> 复制链接 </van-button>
            <br />
            <br />
            <van-button block type="primary" native-type="submit" class="btn2" @click="download()"> 保存图片 </van-button>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import router from "../../router";
import { GetQCode, itemsMultiple } from "@/network/user";
import QrcodeVue from 'qrcode.vue'
import Clipboard from 'clipboard'
export default {
    //导入组件
    components: {
        QrcodeVue,
    },
    setup() {
        const store = useStore(); // 获取对象
        const state = reactive({
            token: store.state.user.token,
            InviteCodeCode: store.state.user.token.InviteCodeCode,
            url: '',
            apiUrl: '',
            qcsize: 222,
        });
        onMounted(() => {
            init();
        });
        // 初始化信息
        const init = () => {
            var params = {
                catalogNames: 'fxym'
            }
            // 获取fxym  商品类型   字典key    fxym
            itemsMultiple(params).then((res) => {
                if (res.Code == 0) {
                    console.log(res.Data.fxym.length)
                    if (res.Data.fxym.length > 0) {
                        state.url = res.Data.fxym[0].Value + '/register?Code=' + store.state.user.token.InviteCodeCode;
                    } else {
                        state.url = '域名错误'
                    }
                    console.log(state.url)
                    GetQCodeImg();
                } else { }
            });
        };
        //获取图片
        const GetQCodeImg = () => {
            var params = {
                memberId: state.token.ID,
                urlStr: state.url
            }
            GetQCode(params).then((res) => {
                if (res.Code == 0) {
                    var data = res.Data;
                    var hostUrl = window.location.host;
                    var protocol = location.protocol;
                    // state.apiUrl = protocol + '//' + hostUrl + '/' + data;
                    state.apiUrl = 'http://119.45.149.156:2025/' + data;
                } else { }
            });
        }
        //复制链接
        const clipboard = () => {
            let clipboard = new Clipboard('.copy')
            clipboard.on('success', (e) => {
                Toast.success('复制成功');
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', (e) => {
                Toast.success('该浏览器不支持自动复制');
                // 释放内存
                clipboard.destroy()
            })

        };
        const clipboardCode = () => {
            let clipboard = new Clipboard('.copyCode')
            clipboard.on('success', (e) => {
                Toast.success('复制成功');
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', (e) => {
                Toast.success('该浏览器不支持自动复制');
                // 释放内存
                clipboard.destroy()
            })

        };
        //保存图片
        const download = () => {
            var path = state.apiUrl;
            window.requesTag.saveImage(path)
            // if (window.indexOfApp == true) {
            //     var dtask = plus.downloader.createDownload(path, {}, function (d, status) {
            //         // 下载完成
            //         if (status == 200) {
            //             // Toast.success("Download success: " + d.filename);
            //             plus.gallery.save(d.filename, function () {
            //                 Toast.success("图片已成功保存到相册");
            //             }, function () {
            //                 Toast.success("图片保存失败");
            //             });
            //         } else {
            //             Toast.success("Download failed: " + status);
            //         }
            //     });
            //     //dtask.addEventListener("statechanged", onStateChanged, false);
            //     dtask.start();

            // } else {
            //     //下载文件
            //     downloadByBlob(path)
            // }
        };
        const downloadByBlob = (url) => {
            //下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function () {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = url;
        };
        const onClickLeft = () => {
            router.push({ path: "/my" });
        };
        return {
            ...toRefs(state),
            GetQCodeImg,
            clipboardCode,
            onClickLeft,
            clipboard,
            download,
        };
    },
};
</script>

<style scoped></style>